import React, { memo, ReactNode } from 'react'
// import classNames from 'classnames'
import { useAppSelector, shallowEqualApp } from '@/store'
import { RecommendWrapper } from './style'
import SectionItemV1 from '@/components/section-item-v1'
import SectionHeaderV1 from '@/components/section-header-v1'

interface IProps {
  children?: ReactNode
}

const HotRecommend: React.FC<IProps> = () => {
  const { hotRecommends } = useAppSelector(
    (state) => ({
      hotRecommends: state.recommend.hotRecommends
    }),
    shallowEqualApp
  )
  return (
    <RecommendWrapper>
      <SectionHeaderV1
        title="热门推荐"
        keywords={['华语', '流行', '摇滚', '民谣', '电子']}
        morePath="/discover/songs"
      ></SectionHeaderV1>
      <div className="hot-recommend">
        {hotRecommends.map((item) => {
          return <SectionItemV1 key={item.id} info={item}></SectionItemV1>
        })}
      </div>
    </RecommendWrapper>
  )
}

export default memo(HotRecommend)
